<template>
  <div class="msg">
    <van-radio-group v-model="proxyType">
      <van-radio name="1">动态代理API</van-radio>
      <van-field
        v-model="proxyUrl"
        type="textarea"
        :rows="1"
        :disabled="proxyType != '1'"
        placeholder="请输入自动获取第三方代理api地址"
      >
      </van-field>
      <van-radio name="2">固定IP</van-radio>
      <van-field
        v-model="proxys"
        :disabled="proxyType != '2'"
        :rows="10"
        type="textarea"
        placeholder="请输入代理ip"
      >
      </van-field>
    </van-radio-group>
    <div style="color: red; font-size: 12px">
      <van-icon
        name="warning"
      />如有对接第三方平台自动获取代理ip的，填写api地址；
      ip提取方式txt文本，多个回车（/r/n）分隔。 <br />代理ip格式: IP:端口:用户名:密码
    </div>
    <div style="padding: 10px 30px">
      <van-button type="info" round block size="small" @click="switchProxy"
        >{{ proxyFlag ? "关闭" : "启动" }}代理</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      proxyType: '1',
      proxyFlag: false,
      proxyUrl: "",
      proxys: "",
    };
  },
  async created() {
    this.proxys = (await this.$getItem("proxys-config")) || "";
    this.proxyType = (await this.$getItem("proxys-type")) || "1";
    this.proxyUrl = (await this.$getItem("proxys-url")) || "";
    this.proxyFlag = (await this.$getItem("proxys-flag")) || false;
  },
  watch: {
    proxyType () {
      this.$setItem({
        "proxys-type": this.proxyType
      });
    },
    proxyUrl () {
      this.$setItem({
        "proxys-url": this.proxyUrl
      });
    },
    proxys() {
      this.$setItem({
        "proxys-config": this.proxys,
      });
    },
  },
  methods: {
    switchProxy() {
      var bg = chrome.extension.getBackgroundPage();
      this.proxyFlag = !this.proxyFlag;
      this.$setItem({
        "proxys-flag": this.proxyFlag,
      });
      bg.switchProxy(this.proxyFlag);
    },
  },
};
</script>

<style scoped>
.msg {
  text-align: left;
  font-size: 14px;
  color: #999;
  padding: 5px 10px;
}
</style>